<template>
  <div class="select">
    <div class="title"  @click="allSelect">
      <span class="w20 h20" :class="{'active': selectdeLength  == data.length }"></span>
      <p class="ca8">全选</p>
    </div>
    <ul>
    	<li v-for="(item,index) in data" :key="item.userId" @click="singleChoice(item.userId)">
        <span class="w20 h20 mr15" :class="{'active':selectdeList.includes(item.userId)}"></span>
         <image class="w60 h60" :src="item.logo"></image>
         <div class="name">
           <p class="c38 fbold fs16">{{item.name}}</p>
           <p class="c78 fs14">{{item.position}}</p>
         </div>
       </li>
    </ul>
    <div class="confirm-btn" @click="confirm">
      确认
    </div>
  </div>
</template>

<script>
  import WXAJAX from '../../../utils/request.js';
  import {mapMutations} from 'vuex'
  export default {

    data(){
      return{
        listImg:WXAJAX.imgBackUrl+'/product-index/dynamic.png',
        companyId:this.$store.state.companyId,
        // data:[
        //   {
        //     name:'王大锤',
        //     id:1,
        //     img:this.listImg,
        //     zhiwu:'boss',
        //     isSelect:false
        //   },
        //   {
        //     name:'王小锤',
        //     id:2,
        //     img:this.listImg,
        //     zhiwu:'销售',
        //     isSelect:false
        //   },
        //   {
        //     name:'小明',
        //     id:3,
        //     img:this.listImg,
        //     zhiwu:'前台',
        //     isSelect:false
        //   }
        // ],
        data:'',
        selectdeList:[],
        selectdeLength:'',
        page:1
      }
    },
    watch:{
      //vue监听不到变化数组的length
      selectdeList(newVal,oldVal){
        this.selectdeLength = newVal.length
      }
    },
    mounted() {
      this.getList()
    },
    async onPullDownRefresh() {
        this.page = 1;
        this.data = '';
        await this.getCompanyDynamics(this.page);
        wx.stopPullDownRefresh();
      },
      async onReachBottom() {
        if (this.isLoading) {
          return;
        }
        this.page++;
        await this.getCompanyDynamics(this.page);
     },
    methods:{
      //保存员工id
      ...mapMutations(['setSaffId']),
      //请求数据
      async getList(){
        try {
          let data = await WXAJAX.POST(
            {companyId:this.companyId},
            "",
            "/businessCard/getList"
          );
          if (data) {
            this.data = data
          }
          this.isLoading = false;
          wx.hideLoading();
        } catch (error) {
          this.isLoading = false;
          wx.hideLoading();
          console.log(".............", error);
        }
      },
      //单选按钮
      singleChoice(id){
        console.log(this.data.length)
        if(this.selectdeList.includes(id)){
          this.selectdeList = this.selectdeList.filter(item=>{
            return item !== id
          })
        }else{
          this.selectdeList.push(id)
          //console.log(this.selectdeList.length)
        }
      },
      //全选按钮
      allSelect(){
          var len = this.data.length;
          this.selectdeList = [];
          for(var i=0;i<len;i++){
            this.selectdeList.push(this.data[i].userId);
          }
          if(this.selectdeLength == this.data.length){
            this.selectdeList = []
          }
        },
        confirm(){
          this.setSaffId(this.selectdeList)
          wx.navigateBack({
            delta:1
          })
        }
    },
  }
</script>

<style scoped>
 .select{
   position: relative;
   height: 100%;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   background: #FFFFFF;
   flex-direction: column;
 }
 .title{
   height: 88upx;
   display: flex;
   align-items: center;
   padding-left: 32upx;
 }
 span{
   border:1upx solid #E8E8E8;
   border-radius: 50%;
   margin-right: 20upx;
 }
 ul{
   display: flex;
   flex-direction: column;
   padding-left: 32upx;
 }
 ul li{
   height: 160upx;
   display: flex;
   align-items:center;
 }
 ul li image{
   border-radius: 10upx;
   margin-right: 22upx;
 }
 .name{
   height: 120upx;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
 .active{
   background: #51CDCB;
 }
 .confirm-btn{
  position: fixed;
  bottom: 0;
  height: 98upx;
  width: 100%;
  line-height: 98upx;
  text-align: center;
  color: #FFFFFF;
  font-size: 36upx;
  background:linear-gradient(90deg,rgba(118,218,217,1),rgba(81,205,204,1));
}
</style>
